﻿<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header with-border">
                <div class="btn-group">
                    <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><h3 class="box-title">Steps <i class="fa fa-caret-down"></i></h3></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Steps</a></li>
                        <li><a href="#">Active Calories</a></li>
                        <li><a href="#">Total Calories</a></li>
                        <!--<li class="divider"></li>-->
                        <li><a href="#">Distance</a></li>
                        <li><a href="#">Elevation</a></li>
                        <li><a href="#">Activity</a></li>
                    </ul>
                </div>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool">Week</button>
                    <button class="btn btn-box-tool">Day</button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-plus-circle"></i></button>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        <p class="text-center">
                            <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
                        </p>
                        <!--<div class="chart-responsive">
                            <canvas id="activityChart" height="180"></canvas>
                        </div>-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                <p> Steps</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p> Active Calories</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                Total Calories
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        Pie Chart
                    </div>
                    <div class="col-md-4 text-right" >
                        <div class="row">
                            <div class="col-md-12">
                                Distance
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                Elevation
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                Activity
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!--<div class="box-body text-center">-->
                        <linechart data='data' options='options' style="width:100%;height:300px;"></linechart>
                        <!--</div>-->
                    </div>
                </div>
            </div><!-- ./box-body -->
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <div class="progress-group">
                            <span class="progress-text">Send Inquiries</span>
                            <span class="progress-number"><b>250</b>/500</span>
                            <div class="progress sm">
                                <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                            </div>
                        </div>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.box-footer -->
        </div><!-- /.box -->
    </div><!-- /.col -->
</div><!-- /.row -->